<template>
  <t-config-provider :global-config="globalLocale">
      <t-table
        row-key="id"
        :data="data"
        :columns="columns"
        :bordered="true"
        :rowspan-and-colspan="rowspanAndColspan"
        cell-empty-content="-"
        lazy-load
      >
    </t-table>
    </t-config-provider>
  <div class="score-btn">
    <t-space :size="8" >
      <t-button variant="outline" theme="default" @click="goLast">上一步</t-button>
      <t-button variant="outline" theme="default" @click="goSave">保存</t-button>
      <t-button theme="primary" @click="goNext">下一步</t-button>
    </t-space>
  </div>
  <t-message theme="warning"  v-for="item in errors">{{item}}</t-message>
</template>
<script lang="jsx" setup>
import { reactive, ref,computed, watch } from 'vue';
import { CaretDownSmallIcon } from 'tdesign-icons-vue-next';
import { Input,InputNumber,MessagePlugin } from 'tdesign-vue-next';
import { approvalScore } from '@/api/sjhg/approval';
const props = defineProps({
  assessId: {
    type: Number,
    default: ''
  },
  draftdata:{
    type: Array,
    default: () => ([])
  }
})
const emit = defineEmits(["goNext","goLast",'goSave']);
// const emitData = ref({totalScore:0,totalGrade:''})
const globalLocale = ref({
  table: {
    sortIcon: (h) => h && <CaretDownSmallIcon size="16px" />,
  },
});
//---------------------------------------初始化数据--------------------------------
const data = reactive([])
console.log('==props.draftdata=>',props.draftdata)
// 监听父组件传递的值的变化
watch(
  () => props.draftdata, // 监听 props.message
  (newVal, oldVal) => {
    console.log('父组件传值变化:', oldVal, '→', newVal);
    // 执行其他逻辑...
    getDFData(newVal)
  },
  { immediate: true } // 可选：立即执行一次
);
function getDFData(dfdata){
  if(dfdata  && dfdata?.length>0){
    Object.assign(data,dfdata)
  }else{
    for (let i = 0; i < 28; i++) {
    data.push({
            id: 'score'+(i+1) ,
            domain: ['数据战略','数据战略','数据战略',
                    '数据治理','数据治理','数据治理',
                    '数据架构','数据架构','数据架构','数据架构',
                    '数据应用','数据应用','数据应用',
                    '数据安全','数据安全','数据安全',
                    '数据质量','数据质量','数据质量','数据质量',
                    '数据标准','数据标准','数据标准','数据标准',
                    '数据生存周期','数据生存周期','数据生存周期','数据生存周期'][i%28],
            item: ['数据战略规划', '数据战略实施', '数据战略评估',
                  '数据治理组织','数据制度建设','数据治理沟通',
                  '数据模型','数据分布','数据集成与共享','元数据管理',
                  '数据分析','数据开放共享','数据服务',
                  '数据安全策略','数据安全管理','数据安全审计',
                  '数据质量需求','数据质量检测','数据质量分析','数据质量提升',
                  '业务术语','参考数据和主数据','数据元','指标数据',
                  '数据需求','数据设计与开发','数据运维','数据退役'
            ][i % 28],
            level1:null,
            level2:null,
            level3:null,
            nlLevel:'',
            domainLevel:'',
            weight:['0.07','0.07','0.07',
                    '0.07','0.07','0.07',
                    '0.158','0.158','0.158','0.158',
                    '0.158','0.158','0.158',
                    '0.158','0.158','0.158',
                    '0.158','0.158','0.158','0.158',
                    '0.07','0.07','0.07','0.07',
                    '0.158','0.158','0.158','0.158'][i % 28],
            grade:'',
            total:'',
            allGrade:''
          });        
};
}
}
function getGrade(value, type = 'total') {
  const thresholds = {
    total: [4, 3, 2, 1],
    domain: [4, 3, 2, 1] // 可以有不同的阈值
  };
  
  if (value > thresholds[type][0]) return '优化级';
  if (value > thresholds[type][1]) return '量化管理级';
  if (value > thresholds[type][2]) return '稳健级';
  if (value > thresholds[type][3]) return '受管理级';
  return '初始级';
}
//能力得分
const nlLevelComputed = computed(()=>{
  data.forEach((item,index) => {
    if(item.level1 && item.level2 && item.level3){
      item.nlLevel = (parseFloat(item.level1) + parseFloat(item.level2) + parseFloat(item.level3)).toFixed(2);
    }
  });

//-------------------------------------计算能力域得分-----------------------------------------------------------
//定义分组规则
    const groupRules = [
      { indices: [0, 1, 2], divisor: 3 },      // 前3个一组
      { indices: [3, 4, 5], divisor: 3 },      // 接下来3个一组
      { indices: [6, 7, 8, 9], divisor: 4 },   // 接下来4个一组
      { indices: [10, 11, 12], divisor: 3 },   // 接下来3个一组
      { indices: [13, 14, 15], divisor: 3 },    // 接下来3个一组
      { indices: [16, 17, 18, 19], divisor: 4 }, // 接下来4个一组
      { indices: [20, 21, 22, 23], divisor: 4 }, // 接下来4个一组
      { indices: [24, 25, 26, 27], divisor: 4 }  // 最后4个一组
    ];
    //定义域权重数据（与数据项一一对应）
    const domainWeights = [
      '0.07', '0.07', '0.07',
      '0.07', '0.07', '0.07',
      '0.158', '0.158', '0.158', '0.158',
      '0.158', '0.158', '0.158',
      '0.158', '0.158', '0.158',
      '0.158', '0.158', '0.158', '0.158',
      '0.07', '0.07', '0.07', '0.07',
      '0.158', '0.158', '0.158', '0.158'
    ].map(Number); // 转换为数字类型
    // 处理每个分组
    groupRules.forEach(rule => {
      const { indices, divisor } = rule;
      // 检查组内所有nlLevel是否有值且不为0
      const allValid  = indices.every(index => {
        const item = data[index]
        return item &&
                item.nlLevel !== '' && 
                item.nlLevel !== null && 
                item.nlLevel !== undefined && 
                parseFloat(item.nlLevel) > 0;  // 排除0和负数
      });
      //计算能力域得分和能力域等级
      if (allValid ) {
        // 计算平均值
        const sum = indices.reduce((total, index) => 
          total + parseFloat(data[index].nlLevel), 0);
        const domain = (sum / divisor).toFixed(2);
        // 为组内每个元素赋值
        indices.forEach(index => {
          data[index].domainLevel = domain;
          // 根据domainLevel分配grade等级
          const domainValue = parseFloat(domain);
          data[index].grade = getGrade(domainValue,'domain')
        });
      }
    });
    // 第二阶段：在所有nlLevel计算完成后，计算total和allGrade
    // 检查所有nlLevel是否已计算（不为空且不等于0）
    const allNlLevelsCalculated = data.every(item => 
      item && item.nlLevel !== null && item.nlLevel !== undefined 
      && !isNaN(parseFloat(item.nlLevel))
    );

    if (allNlLevelsCalculated) {
    // 初始化 total 为 0
    let totalScore = 0;

    // 按 groupRules 分组计算 domainLevel * weight（只计算一次）
    groupRules.forEach(rule => {
      const { indices } = rule;
      const firstIndex = indices[0]; // 取该分组的第一个 weight
      const domainLevel = parseFloat(data[firstIndex].domainLevel);
      const weight = domainWeights[firstIndex];
      // 累加每个分组的贡献
      totalScore += domainLevel * weight;
    });
    // 更新所有行的 total 和 allGrade
    data.forEach(item => {
      item.total = totalScore.toFixed(2);
      item.allGrade = getGrade(totalScore, 'total');
    });
    } else {
      console.warn('部分 nlLevel 未计算完成，无法计算综合分值和等级');
    }
})
const columns = computed(()=> [
  { colKey: 'domain', title: '能力域' ,width:'120'},
  { colKey: 'item', title: '能力项',ellipsis: true,width:'150'},
  { colKey: 'level1', title: 'Level1', wdith:'100',
  edit: {
      // 1. 支持任意组件。需保证组件包含 `value` 和 `onChange` 两个属性，且 onChange 的第一个参数值为 new value。
      // 2. 如果希望支持校验，组件还需包含 `status` 和 `tips` 属性。具体 API 含义参考 Input 组件
      component: InputNumber,
      // props, 透传全部属性到 Input 组件。可以是一个函数，不同行有不同的 props 属性 时，使用 Function）
      props: {
        clearable: true,
        autofocus: false,
        type: 'number',
        theme: "normal",
        decimalPlaces: 2
      },
      // 触发校验的时机（when to validate)
      validateTrigger: 'change',
      // 透传给 component: Input 的事件（也可以在 edit.props 中添加）
      on: (editContext) => ({
        onBlur: () => {
          // console.log('失去焦点', editContext);
          const newData = [...data];
          newData.splice(editContext.rowIndex, 1, editContext.editedRow);
          Object.assign(data, newData);
          nlLevelComputed.value
          // console.log('newData',data)
        },
        onEnter: (ctx) => {
          ctx?.e?.preventDefault();
          // console.log('onEnter', ctx);
        },
      }),
      // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
      // abortEditOnEvent: ['onEnter'],
      // 编辑完成，退出编辑态后触发
      onEdited: (context) => {
        // console.log(context);
        // const newData = [...data];
        // newData.splice(context.rowIndex, 1, context.newRowData);
        // // data = newData;
        // Object.assign(data, newData);
        // nlLevelComputed.value
        // console.log('Edit firstName:', context);
        // MessagePlugin.success('Success');
      },
      // 校验规则，此处同 Form 表单。https://tdesign.tencent.com/vue-next/components/form
      rules: [
        { required: true, message: '不能为空' },
        // /^(0\.([1-9]\d?|\d[1-9])|1(\.0{1,2})?)$/ //0到1之间  且不能为0
        // /^(0(\.\d{1,2})?|1(\.0{1,2})?)$/       //0到1之间
        { pattern: /^(0\.([1-9]\d?|\d[1-9])|1(\.0{1,2})?)$/, message: '0~1之间,保留两位小数' }
      ],
      // 默认是否为编辑状态
      defaultEditable: true,
      //不显示编辑图标
      showEditIcon:false
    },
  },
  { colKey: 'level2', title: 'Level2', wdith:'100',
  edit: {
      component: InputNumber,
      props: {
        clearable: true,
        autofocus: false,
        type: 'number',
        theme: "normal",
        decimalPlaces: 2
      },
      validateTrigger: 'change',
      on: (editContext) => ({
        onBlur: () => {
          // console.log('失去焦点', editContext);
          const newData = [...data];
          newData.splice(editContext.rowIndex, 1, editContext.editedRow);
          Object.assign(data, newData);
          nlLevelComputed.value
        },
        onEnter: (ctx) => {
          ctx?.e?.preventDefault();
          console.log('onEnter', ctx);
        },
      }),
      abortEditOnEvent: ['onEnter'],
      onEdited: (context) => {
        // console.log(context);
        // const newData = [...data];
        // newData.splice(context.rowIndex, 1, context.newRowData);
        // // data = newData;
        // Object.assign(data, newData);
        // nlLevelComputed.value
        // // console.log('Edit firstName:', context);
        // // MessagePlugin.success('Success');
      },
      rules: [
        { required: true, message: '不能为空' },
        { pattern: /^(0\.([1-9]\d?|\d[1-9])|1(\.0{1,2})?)$/, message: '0~1之间,保留两位小数' }
      ],
      defaultEditable: true,
       //不显示编辑图标
      showEditIcon:false
    },
   },
  { colKey: 'level3', title: 'Level3', wdith:'100',
  edit: {
      component: InputNumber,
      props: {
        clearable: true,
        autofocus: false,
        type: 'number',
        theme: "normal",
        decimalPlaces: 2
      },
      validateTrigger: 'change',
      on: (editContext) => ({
        onBlur: () => {
          // console.log('失去焦点', editContext);
          const newData = [...data];
          newData.splice(editContext.rowIndex, 1, editContext.editedRow);
          Object.assign(data, newData);
          nlLevelComputed.value
        },
        onEnter: (ctx) => {
          ctx?.e?.preventDefault();
          console.log('onEnter', ctx);
        },
      }),
      abortEditOnEvent: ['onEnter'],
      onEdited: (context) => {
        // console.log('==>',data);
        // console.log(context);
        // const newData = [...data];
        // newData.splice(context.rowIndex, 1, context.newRowData);
        // // data = newData;
        // Object.assign(data, newData);
        // nlLevelComputed.value
        // console.log('Edit firstName:', data);
        // // MessagePlugin.success('Success');
      },
      rules: [
        { required: true, message: '不能为空' },
        { pattern: /^(0\.([1-9]\d?|\d[1-9])|1(\.0{1,2})?)$/, message: '0~1之间,保留两位小数' }
      ],
      defaultEditable: true,
       //不显示编辑图标
       showEditIcon:false
    },
   },
  { colKey: 'nlLevel', title: '能力得分', wdith:'100' },
  { colKey: 'domainLevel', title: '能力域得分' },
  { colKey: 'weight', title: '域权重', wdith:'60' ,
    cell: (h, { row }) => {
        return (
          <div class="mytxt" >
            { row.weight}
          </div>
        );
      },
  },
  { colKey: 'grade', title: '能力域等级'},
  { colKey: 'total', title: '综合分数'},
  { colKey: 'allGrade', title: '综合等级' },
]) ;
//--------------------------------------校验--------------------------------------------
function validateTableDataWithErrors(tableData) {
  const errors = [];
  if (!Array.isArray(tableData)) {
    errors.push('表格数据不是数组');
    return { isValid: false, errors };
  }
  const isValid = tableData.every((item, index) => {
    const itemErrors = [];
    const requiredFields2 = [
      'level1', 'level2', 'level3'
    ];
    requiredFields2.forEach(field => {
      const value = item[field];
      if (value === null || value === undefined || value === '') {
        itemErrors.push(`字段 ${field} 为空`);
      }else if(parseFloat(value) > 1 || parseFloat(value) <= 0){
        itemErrors.push(`字段 ${field} 不在0到1之间`);
      }
    });
    const requiredFields = [
      'nlLevel', 'domainLevel', 
      'grade', 'total', 'allGrade'
    ];
    requiredFields.forEach(field => {
      const value = item[field];
      if (value === null || value === undefined || value === '') {
        itemErrors.push(`字段 ${field} 为空`);
      }
      if (['level1', 'level2', 'level3', 'nlLevel', 'domainLevel', 'total'].includes(field)) {
        const numValue = parseFloat(value);
        if (isNaN(numValue)) {
          itemErrors.push(`字段 ${field} 不是有效数字`);
        }
      }
    });
    if (itemErrors.length > 0) {
      errors.push({
        rowIndex: index,
        errors: itemErrors
      });
      return false;
    }
    return true;
  });
  return {
    isValid,
    errors: isValid ? [] : errors
  };
}

//-----------------------------------按钮操作-------------------------------------------
 //下一步
 const goNext = () =>{
  try {
    // 使用示例
      const { isValid } = validateTableDataWithErrors(data);
      if (!isValid) {
        MessagePlugin.warning("表格数据不完整或不符合要求,请检查并填写~")
        // 可以显示更详细的错误信息给用户
      }else{
        const submitData = {
          assessId: props.assessId,
          extra: JSON.stringify(data),
          isDraft: 1
        }
        approvalScore(submitData)
          .then((res) => {
            if (res.code == 200) {
              MessagePlugin.success('评分成功');
              //成功后跳转到下一步
              // emit('goNext',emitData.value)
              emit('goNext')
            } else {
              MessagePlugin.error(res.msg);
            }
          })
          .finally(() => {});
          }
  } catch (error) {
    console.error("验证失败:", error);
  }
}

//上一步
const goLast = () =>{
  emit('goLast',data)
}
//保存
const goSave = () =>{
  emit('goSave',data)
}

//可合并的表格
const rowspanAndColspan = ({ col, rowIndex, colIndex }) => {
  //colIndex 列   rowIndex 行
  if ((colIndex === 0 || colIndex === 6) && (rowIndex ===0 || rowIndex === 3 || rowIndex === 10 || rowIndex === 13 ) ) {
    return {
      colspan: 1,
      rowspan: 3,
    };
  }
  if ( (colIndex === 0 || colIndex === 6) && (rowIndex === 6 || rowIndex === 16 || rowIndex === 20 || rowIndex === 24 )) {
    return {
      colspan: 1,
      rowspan: 4,
    };
  }
  // col.colKey === 'zonghe' &&  
  if(colIndex === 9 || colIndex === 10 ){
    return {
      colspan: 1,
      rowspan: 28,
    };
  }
};

</script>
<style lang="scss" scoped>
:deep(.t-input-number ){
  width: 100%;
}
.score-btn{
  width: 100%;
  margin-top: 20px;
  align-items: center;
  display: flex;
  justify-content: flex-end;
}
:deep(.mytxt){
   color:#FF4D65;
}
:deep(.t-pagination__total ){
  flex: none;
  margin-right: 10px;
  color: #1D2129;
}

:deep(.t-table__content) {
  border: 1px solid #E5E6EB;
  border-radius: 8px;
}
:deep(.t-table__header >tr) {
  background-color: #F7F8FA;
}
// :deep(.t-table__th-cell-inner) {
//   color: #4E5969;
//   font-size: 14px;
//   font-weight: 600;
// }
.home-container{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}
.top-container{
  display: flex;
  height: 88px;
  background: var(--bg-white);
  border-radius: 8px;
  padding: 0 16px;
  position: relative;
  &__img{
    width: 56px;
    height: 56px;
    margin-right: 10px;
    margin-top: 16px;
  }
  &__title{
      color: #565960;
      font-size: 12px;
      margin-top: 16px;
    }
   
    &__value{
      color: #252931;
      font-size: 18px;
      font-weight: bold;
      margin-top: 16px;
    }  
    &__btn{
      right: 16px;
      top: 16px;
      position: absolute;
      color: #1966FF;
    }
}
.index {
  padding: 0;
  margin-top: 16px;
}
</style>
